<template>
  <el-menu
    background-color="#ff674b"
    text-color="#fff"
    active-text-color="#fff"
    router
    unique-opened
    :default-active="$route.path"
  >
    <el-menu-item index="/home" :class="{'is-active':$route.path==='/home'}">
      <i style="color: #fff" class="el-icon-s-home"></i>
      <span slot="title">管理中心</span>
    </el-menu-item>
    
    <el-submenu v-for="item in menus" :key="item.id" :index="item.id + ''">
      <template slot="title">
        <i style="color: #fff" :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item
        :class="$route.path===val.url?'is-active':''"
        :index="val.url"
        v-for="val in item.children"
        :key="val.id"
        >{{ val.title }}</el-menu-item
      >
    </el-submenu>


  </el-menu>
</template>

<script>
import { getAdminInfo } from "../utils/common";
export default {
  data() {
    return {
      menus: [],
    };
  },
  created() {
    console.log(this.$route);
    // 从本地存储中读取操作权限数组
    const { menus } = getAdminInfo();
    this.menus = menus;
  },
};
</script>

<style scoped>
ul.el-menu {
  border-right: 0;
}
/* 导航高亮选择器 */
li.is-active{
  background: rgba(0,0,0,0.3) !important;
}
</style>